import router from './router' // 我们自己买new的router路由对象(相当于this.$router)
import store from './store'

// 导入进度条插件
import NProgress from 'nprogress'
// 导入进度条样式
import 'nprogress/nprogress.css'
import getPageTitle from './utils/get-page-title'
// import { to } from './utils/awaitTo'

// const whiteList = ['/login'] // no redirect whitelist

// NProgress.configure({ showSpinner: false }) // 右侧进度环
// 知识点：分析代码思路
// 先找官方文档，读一读
// 在自己改一改，分析分析，改改，打印...
// 百度/问别人
// 先放放，不影响核心逻辑，最后联系上下文，再猜

const whiteList = ['/login', '/404'] // 白名单

// 全局路由-前置守卫
// 刷新网页会让路由守卫再走一次
router.beforeEach(async(to, from, next) => {
  // to：即将要进入的目标
  // from：当前导航正要离开的路由
  // next：next 是一个函数，通常是指放行，next() 直接放行 ，next(路径) 跳转到某一个页面

  NProgress.start() // 显示进度条效果

  const token = store.getters.token
  if (token) { // 登录
    if (to.path === '/login') { // 登录状态，要求登录页
      next('/')
      NProgress.done() // 重定向，就会导致上一次路由终端，启动的进度条需要手动关闭
      // 重定向会导致路由守卫再次执行，再次开启一个进度条，跳转后关闭
    } else {
      // 如果没有用户名字，先请求等待成功后，放行页面next()
      // 如果有名字if进不去，也要走next()放行页面

      // await 等待：等待后面用户信息保存到vuex，在next()跳转页面，就直接看到用户名
      // 如果不加，异步去请求，主线程代码先往下next()跳转页面,页面上没有名字，异步请求数据完成vuex值变量化
      // 响应式更新所有使用vuex相关的变量 -> 从没有名字 ->有名字显示
      if (!store.getters.name) {
        await store.dispatch('user/getUserInfoActions')
      }
      next()
    }
  } else { // 未登录
    // 可以写并列的判断，很麻烦，不如写过数组（白名单）
    if (whiteList.includes(to.path)) { // 未登录->去白名单->放行
      next()
    } else {
      next('login')
      NProgress.done()
    }
  }
})

// 后置路由守卫
// router.afterEach((to, from) => {
//   NProgress.done()
// })

// 全局路由-后置守卫(路由跳转完成，再触发()函数体)
router.afterEach((to, from) => {
  // 隐藏进度条效果
  NProgress.done() // 进度条关闭

  // 网页切换完毕，在设置当前切换完毕的这个页面的标题
  // console.log(to) // 运行时的路有对象信息，包含路由规则数组里的对象
  document.title = getPageTitle(to.meta.title)
})
